<template>
  <div class="app-container">
    <div class="chart-title">档案管理</div>
    <div class="all-content">
      <div class="per-info">
        <div class="avatar-info">
          <div class="avatar-img">
            <el-image
              style="width:100%;height:100%"
              :src="require('@/assets/images/avatar/'+ avatar)"
              fit="contain"
            ></el-image>
          </div>
          <div class="avatar-name"> {{ username }} </div>
        </div>
        <div class="mess-info">
          <div class="mess-items">
            <div class="mess-name">姓名</div>
            <div class="mess-val"> {{ username }} </div>
          </div>
          <div class="mess-items">
            <div class="mess-name">手机号</div>
            <div class="mess-val"> {{ user.mobile }} </div>
          </div>
          <div class="mess-items">
            <div class="mess-name">邮箱</div>
            <div class="mess-val"></div>
          </div>
          <div class="mess-items">
            <div class="mess-name">营运中心</div>
            <div class="mess-val"></div>
          </div>
          <div class="mess-items">
            <div class="mess-name">登录密码</div>
            <div class="mess-val modify">
              <div>******</div>
              <div
                class="modify-button"
                @click="handleChange()"
              >修改</div>
            </div>
          </div>
        </div>
      </div>
      <div class="QR-content">
        <div class="bind-wechart">
          <div>微信扫码绑定</div>
          <div
            v-if="user.openid"
            class="untie"
            @click="untieUser()"
          >解除绑定</div>
        </div>
        <template v-if="QRCode">
          <div class="QR-img">
            <img :src="QRCode" />
          </div>
        </template>
      </div>
    </div>
    <!-- 编辑 -->
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogVisible"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-width="120px"
        label-position="right"
        size="small"
      >
        <div class="pops">
          <div class="pops-normal">
            <el-form-item
              :label="$t('password.old') + ' :'"
              prop="old_password"
            >
              <el-input
                type="password"
                v-model="temp.old_password"
              ></el-input>
            </el-form-item>
            <el-form-item
              :label="$t('password.new') + ' :'"
              prop="new_password"
            >
              <el-input
                type="password"
                v-model="temp.new_password"
              ></el-input>
            </el-form-item>
            <el-form-item
              :label="$t('password.confirm') + ' :'"
              prop="confirm_password"
            >
              <el-input
                type="password"
                v-model="temp.confirm_password"
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div class="footer-banner">
      </div>
      <div
        slot="footer"
        class="dialog-footer between-space"
      >
        <div>
        </div>
        <div>
          <el-button @click="dialogVisible = false">{{
              $t("table.cancel")
            }}</el-button>
          <el-button
            :disabled="createDisabled"
            type="primary"
            @click="changePassword()"
          >{{ $t("table.confirm") }}</el-button>

        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
import { getToken, getUserMess, setUserMess } from "@/utils/auth"; // get token from cookie
var QRCode = require("qrcode");
export default {
  name: "Login",
  data() {
    const validateConfirm = (rule, value, callback) => {
      // return false
      if (value && value === this.temp.new_password) {
        callback();
      } else if (value) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback(new Error("请确认新密码"));
      }
    };
    const validateNew = (rule, value, callback) => {
      // return false
      if (value && value.length >= 6) {
        callback();
      } else if (value) {
        callback(new Error("密码至少为6位数"));
      } else {
        callback(new Error("请确认新密码"));
      }
    };
    return {
      user: {
        id: undefined,
        account_type: undefined
      },
      QRCode: "",
      loginName: "",
      password: "",
      loginType: "",
      loginWay: 1,
      avatar: 'BG@2x.png',
      temp: {
        new_password: "",
        old_password: "",
        confirm_password: ""
      },
      rules: {
        old_password: [{ required: true, message: "请填写原密码", trigger: "blur" }],
        new_password: [{ required: true, trigger: "blur", validator: validateNew }],
        confirm_password: [{ required: true, trigger: "blur", validator: validateConfirm }]
      },
      token: "",
      dialogVisible: false,
      dialogStatus: "",
      textMap: {
        modify: "修改"
      },
      createDisabled: false
    };
  },
  created() {
    this.token = getToken()
    if (this.token && !this.$store.state.socket.loginTransition && !this.$store.state.socket.loginAccount) {
      this.tokenLogin(this.token)
    }
    console.log('个人信息', getUserMess())
    if (this.isJSON(getUserMess())) {
      if (JSON.parse(getUserMess()).username) {
        this.username = JSON.parse(getUserMess()).username;
      } else {
        this.username = JSON.parse(getUserMess()).name;
      }
      this.user = JSON.parse(getUserMess())
    }
    this.getQRCode()
  },
  methods: {
    tokenLogin() {
      const path = {
        app: "wxadmin",
        api: "api_wxadmin_admin_keepLogin",
        version: "1.0",
        type: 2,
        data: {
          token: this.token
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        this.socketData(res);
      });
    },
    getQRCode() {
      const path = {
        app: "wx",
        api: "api_wx_pc_getBindingCode",
        version: "1.0",
        type: 1,
        data: {
          id: this.user.id ? this.user.id : '',
          account_type: this.user.role ? this.user.role : ''
        }
      }
      this.socketApi.sendSock(JSON.stringify(path), res => {
        this.socketData(res);
      });
    },
    getQRCodeImg(weChatUrl) {
      let QRurl = "";
      if (weChatUrl) {
        QRCode.toDataURL(weChatUrl, function(err, url) {
          if (err) {
            QRurl = "";
          } else {
            QRurl = url;
          }
        });
      } else {
        QRurl = "";
      }
      this.QRCode = QRurl;
    },
    // 解绑
    untieUser() {
      const path = {
        app: "wx",
        api: "api_wx_pc_cancel",
        version: "1.0",
        type: 1,
        data: {
          id: this.user.id ? this.user.id : '',
          account_type: this.user.role ? this.user.role : '',
          openid: this.user.openid ? this.user.openid : ''
        }
      }
      console.log('path', path)
      this.socketApi.sendSock(JSON.stringify(path), res => {
        this.socketData(res);
      });
    },
    handleChange() {
      this.resetTemp();
      this.dialogStatus = "modify";
      this.dialogVisible = true
    },
    changePassword() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (!this.createDisabled) {
            const path = {
              app: "user",
              api: "api_user_index_editPassword",
              version: "1.0",
              type: 1,
              data: {
                new_password: this.temp.new_password ? this.temp.new_password : "",
                old_password: this.temp.old_password ? this.temp.old_password : ""
              }
            }
            console.log('JSON.stringify(path)', JSON.stringify(path))
            this.socketApi.sendSock(JSON.stringify(path), res => {
              this.socketData(res);
            });
            setTimeout(() => {
              this.createDisabled = false;
            }, 1000);
          }
        }
      })
    },
    resetTemp() {
      this.temp = {
        new_password: "",
        old_password: "",
        confirm_password: ""
      }
    },
    socketData(res) {
      console.log('res', res)
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else if (resj.code === 10000) {
          if (resj.api === "api_wxadmin_admin_keepLogin") {
            this.$store.dispatch("loginTransition", true);
            setUserMess(resj.data);
            this.socketApi.sendCache(res => {
              this.socketData(res);
            })
            if (this.isJSON(getUserMess())) {
              if (JSON.parse(getUserMess()).username) {
                this.username = JSON.parse(getUserMess()).username;
              } else {
                this.username = JSON.parse(getUserMess()).name;
              }
              this.user = JSON.parse(getUserMess())
            }
            console.log('this.user', this.user)
          } else if (resj.api === "api_wx_pc_getBindingCode") {
            console.log(resj.data.url)
            this.getQRCodeImg(resj.data.url)
          } else if (resj.api === "api_wx_pc_cancel") {
            // const messData = JSON.parse(getUserMess())
            // messData.openid = ""
            // setUserMess('fufu_user_Mess', JSON.stringify(messData))
            this.$notify({
              title: "成功",
              message: "解绑成功",
              type: "success",
              duration: 2000
            });
            this.user.openid = "";
            // this.getList();
          } else if (resj.api === "api_user_index_editPassword") {
            this.$notify({
              title: "成功",
              message: "修改成功",
              type: "success",
              duration: 2000
            });
            this.dialogVisible = false
          } else if (resj.api === "api_wx_pc_bindingSuccess") {
            console.log('绑定成功')
            this.bindWeChart = true;
            this.tokenLogin();
          }
        }
      }
    }
  }
}
</script>
<style scoped>
.all-content {
  display: flex;
  justify-content: space-between;
}
.per-info {
  display: flex;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  width: 1376px;
}
.avatar-img {
  margin: 64px 72px 16px 72px;
  width: 96px;
  height: 96px;
}
.avatar-name {
  text-align: center;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}
.mess-info {
  border-left: 1px solid #e0e0e0;
  padding: 0 24px;
  box-sizing: border-box;
  flex: 1;
}
.QR-content {
  width: 384px;
  height: 896px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  text-align: center;
  margin-left: 16px;
}
.mess-items {
  display: flex;
  align-items: center;
  height: 96px;
  border-bottom: 1px solid #e0e0e0;
}
.mess-name {
  width: 107px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  text-align: right;
  line-height: 1;
  padding-right: 30px;
  border-right: 1px solid #e0e0e0;
}
.mess-val {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 1;
  padding-left: 30px;
}
.QR-img {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(204, 204, 204, 1);
  border-radius: 4px;
  width: 320px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}
.bind-wechart {
  display: flex;
  justify-content: space-between;
  padding: 24px 32px;
}
.untie {
  width: 104px;
  height: 32px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(45, 65, 152, 1);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(45, 65, 152, 1);
  cursor: pointer;
}
.modify {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modify-button {
  width: 72px;
  height: 32px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(45, 65, 152, 1);
  border-radius: 16px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(45, 65, 152, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>
